<template>
  <section class="table-box">
    <el-table
      ref="elForm"
      :data="showData"
      :height="height"
      v-bind="$attrs"
      :border="border"
      select="select"
      v-on="$listeners"
      @select-all="selectAll"
      @selection-change="selectionChange"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    >
      <template v-for="(v,i) of tableColumns">
        <el-table-column v-if="v.type === 'selection' " :key="v.label + v.prop + i + v.type" type="selection" width="50" :align="v.align || 'center'" />
        <el-table-column v-else-if="v.type === 'index'" :key="v.label + v.prop + i" type="index" label="序号" width="50" :align="v.align || 'center'" />
        <el-table-column v-else-if="v.type === 'slot'" :key="v.label + v.prop + i" :label="v.label" :width="v.width" :min-width="v.minWidth || ''" :align="v.align || 'center'">
          <template v-slot:default="scope">
            <slot :name="v.slotName || v.prop" :row="scope.row" :column="scope.column" :index="scope.$index" />
          </template>
        </el-table-column>
        <el-table-column v-else-if="v.type === 'action'" :key="v.label + v.prop + i" :label="v.label ||'操作'" :width="v.width || 120" :min-width="v.minWidth || ''" :align="v.align || 'center'" :fixed="v.fixed || 'right'">
          <template v-slot:default="scope">
            <slot name="action" :row="scope.row" :column="scope.column" :index="scope.$index" />
          </template>
        </el-table-column>
        <el-table-column
          v-else
          :key="v.label + v.prop + i"
          :prop="v.prop"
          :label="v.label"
          :width="v.width"
          :align="v.align || 'center'"
          :min-width="v.minWidth || null"
          show-overflow-tooltip
          v-bind="v.attrs"
          v-on="v.events || {}"
        />
      </template>
    </el-table>
    <template v-if="hasPagination">
      <my-pagination :disabled="disabledPagination" :total="showTotal" v-bind="$attrs" v-on="$listeners" @handleSizeChange="handleSizeChange" />
    </template>
  </section>
</template>

<script>
export default {
  name: 'MyTable',
  props: {
    title: { type: String, default: '信息列表' },
    border: { type: Boolean, default: true },
    height: { type: [String, Number], default: 'auto' },
    data: { type: Array, default: () => [] },
    tableColumns: { type: Array, default: () => [] },
    pageNum: { type: [Number, String], default: 1, validator: val => typeof val === 'number' },
    pageSize: { type: [Number, String], default: 1, validator: val => typeof val === 'number' },
    total: { type: [Number, String], default: 0, validator: val => typeof val === 'number' },
    multipleSelection: { type: Array, default: () => [] },
    hasPagination: { type: Boolean, default: false },
    disabledPagination: { type: Boolean, default: false }
  },
  data() {
    return { }
  },
  computed: {
    showTotal() {
      return this.total
    },
    showData() {
      if (this.hasPagination) {
        const startNum = (this.pageNum - 1) * this.pageSize
        const endNum = this.showTotal < (this.pageNum * this.pageSize) ? this.showTotal : (this.pageNum * this.pageSize)

        return this.data.slice(startNum, endNum)
      } else {
        return this.data
      }
    }
  },
  mounted() {
    // this.$on('clearSelection', this.clearSelection)
    // this.$on('toggleRowSelection', this.toggleRowSelection)
    // this.$on('toggleAllSelection', this.toggleAllSelection)
    // this.$on('toggleRowExpansion', this.toggleRowExpansion)
    // this.$on('setCurrentRow', this.setCurrentRow)
  },
  methods: {
    select(select, row) {
      this.$emit('select', select, row)
      this.handleSelectionChange(select)
    },
    selectAll(select) {
      this.$emit('selectAll', select)
      this.handleSelectionChange(select)
    },
    selectionChange(select) {
      this.$emit('selectionChange', select)
      this.handleSelectionChange(select)
    },
    handleSelectionChange(val) {
      this.$emit('update:multipleSelection', val)
    },
    handleCurrentChange({ pageNum, pageSize, total }) {
      this.$emit('currentChange', { pageNum, pageSize, total })
    },
    handleSizeChange({ pageNum, pageSize, total }) {
      this.$emit('sizeChange', { pageNum, pageSize, total })
    },

    clearSelection() {
      this.$refs.elForm.clearSelection()
    },
    toggleRowSelection(row, selected) {
      this.$refs.elForm.toggleRowSelection(row, selected)
    },
    toggleAllSelection() {
      this.$refs.elForm.toggleAllSelection()
    },
    toggleRowExpansion(row, expanded) {
      this.$refs.elForm.toggleRowExpansion(row, expanded)
    },
    setCurrentRow(row) {
      this.$refs.elForm.setCurrentRow(row)
    }

  }
}
</script>

<style lang="scss" scoped>
</style>
